<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Skin Test radar</title>
    <style type="text/css">
        #radar {
            border: 1px solid darkgrey;
            height: 500px;
            width: 500px;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <canvas id="radar" width="1000", height="1000"></canvas>
</body>
</html>
<script src="https://cdn.staticfile.org/lodash.js/4.17.4/lodash.min.js"></script>
<script type="text/javascript">
function draw() {
    var canvas = document.getElementById('radar');
    var ctx = canvas.getContext('2d');
    var X=500, Y=500;

    ctx.strokeStyle="#c2c2c2";
    //circle
    function circle(radius) {
        ctx.beginPath();
        ctx.arc(X, Y, radius, 0, Math.PI * 2);
        ctx.stroke();
    }
    var radius = 70;
    circle(1 * radius);
    circle(2 * radius);
    circle(3 * radius);
    circle(4 * radius);
    circle(5 * radius);

    //line
    var lineLength = radius * 5;
    function line(angle) {
        ctx.moveTo(X, Y);
        var x = X + Math.sin(angle) * lineLength;
        var y = Y - Math.cos(angle) * lineLength;
        ctx.lineTo(x, y);
        ctx.stroke();
    }

    line(0);
    line(1 * 2/5 * Math.PI);
    line(2 * 2/5 * Math.PI);
    line(3 * 2/5 * Math.PI);
    line(4 * 2/5 * Math.PI);

    //text
    var textLength = radius * 6;
    function text(angle, patch, title, comment) {
        ctx.fillStyle = '#525252';
        var l = textLength + patch;
        var x = X + Math.sin(angle) * l;
        var y = Y - Math.cos(angle) * l;
        ctx.font="48px 黑体";
        ctx.fillText(title, x - title.length * 48/2, y-15);
        ctx.font="36px 黑体";
        ctx.fillText(comment, x-36, y+40);
    }

    text(0, 0, '水润度', '标准');
    text(1 * 2/5 * Math.PI, 10, '美白度', '标准');
    text(2 * 2/5 * Math.PI, 25, '弹性', '标准');
    text(3 * 2/5 * Math.PI, 25, '紧致', '标准');
    text(4 * 2/5 * Math.PI, 10, '油分', '标准');


    //radar
    function calculate(angle, score) {
        var l = lineLength * score/100;
        var x = X + Math.sin(angle) * l;
        var y = Y - Math.cos(angle) * l;
        return [x, y];
    }
    var points = [
        calculate(0, 89),
        calculate(1 * 2/5 * Math.PI, 47),
        calculate(2 * 2/5 * Math.PI, 28),
        calculate(3 * 2/5 * Math.PI, 65),
        calculate(4 * 2/5 * Math.PI, 42)
    ];
    _.each(points, function (p) {
        ctx.beginPath();
        ctx.fillStyle = '#d0a149';
        ctx.arc(p[0], p[1], 5, 0, Math.PI*2);
        ctx.fill();
    });

    ctx.beginPath();
    ctx.strokeStyle = "rgba(208,161,73,0.8)";;
    ctx.moveTo(points[4][0], points[4][1]);
    _.each(points, function (p) {
        ctx.lineTo(p[0], p[1]);
    });
    ctx.stroke();

    ctx.fillStyle = "rgba(249,229,170,0.5)";;
    ctx.moveTo(points[4][0], points[4][1]);
    _.each(points, function (p) {
        ctx.lineTo(p[0], p[1]);
    });
    ctx.fill();
};

draw();
</script>